<template>
  <el-dialog :title="isEdit?'编辑专运线机械配置':'新增专运线机械配置'"
             :visible.sync="dialogForm"
             width="1100px">
    <el-form :inline="true"
             ref="form"
             :model="form"
             :rules="rules"
             class="add-form"
             label-width="84px">
      <el-row>
        <el-col :span="8">
          <el-form-item label="专运线"
                        prop="lineNo">
            <!-- <el-input v-model="form.resourceNo" clearable></el-input> -->
            <auto-search-line :name="form.lineNo"
                              @matchRecord="getLineInfo"
                              :disabled="isEdit"></auto-search-line>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属单位"
                        prop="orgId">
            <auto-search-org v-model="form.orgId"
                             @select="v=>{form.orgId=v;form.deptId='';form.deptName='';}"
                             @selectName="v=>form.orgName=v"
                             :disabled="true"
                             :name="form.orgName"></auto-search-org>
            <!-- {{$store.state.user.currentUser.org.name}} -->
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="所属部门"
                        prop="deptId">
            <search-dept v-model="form.deptId"
                         @select="v=>{form.deptId=v;}"
                         @selectName="v=>form.deptName=v"
                         :orgId="form.orgId"
                         :disabled="!form.orgId"
                         :name="form.deptName"></search-dept>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table :data="form.specialTransportLineMachine"
                    border
                    stripe
                    max-height="500">
            <el-table-column prop="machineName"
                             label="机械"
                             
                             min-width="100">
              <template slot-scope="scope">
                <auto-search-resource searchType="JOB_JX"
                                      searchName="resourceName"
                                      :name="scope.row.machineName"
                                      @selectName="v=>scope.row.machineName=v"
                                      :valid="true"
                                      @selectId="v=>scope.row.machineId=v"></auto-search-resource>
              </template>
            </el-table-column>
            <el-table-column prop="priority"
                             label="优先级"
                             
                             min-width="100">
              <template slot-scope="scope">
                <el-select v-model="scope.row.priority"
                           placeholder="请选择"
                           clearable>
                  <el-option v-for="[key, val] in _dictPriorityType"
                             :key="key"
                             :label="val"
                             :value="key"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="startParkingLot"
                             label="开始车位"
                             
                             min-width="100">
              <template slot-scope="scope">
                <!-- <el-input v-model="scope.row.startParkingLot"></el-input> -->
                <el-input-number :controls="false"
                                 v-model="scope.row.startParkingLot"
                                 :max="scope.row.endParkingLot?scope.row.endParkingLot:maxLot"
                                 :disabled="!form.lineNo"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="endParkingLot"
                             label="结束车位"
                             
                             min-width="100">
              <template slot-scope="scope">
                <!-- <el-input v-model="scope.row.endParkingLot"></el-input> -->
                <el-input-number :controls="false"
                                 v-model="scope.row.endParkingLot"
                                 :max="maxLot"
                                 :disabled="!form.lineNo"></el-input-number>
              </template>
            </el-table-column>
            <el-table-column prop="valid"
                             label="是否可用"
                             
                             min-width="100">
              <template slot-scope="scope">
                <el-select v-model="scope.row.valid"
                           placeholder="请选择"
                           clearable>
                  <el-option v-for="[key, val] in _dictTrueOrFalse"
                             :key="key"
                             :label="val"
                             :value="key"></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="remark"
                             label="备注"
                             
                             min-width="100">
              <template slot-scope="scope">
                <el-input v-model="scope.row.remark"
                          :maxlength="100"></el-input>
              </template>
            </el-table-column>
            <el-table-column fixed="right"
                             align="center"
                             label="操作"
                             
                             width="180">
              <template slot-scope="scope">
                <el-button type="text"
                           class="danger"
                           size="small"
                           @click="handleRemove(scope.$index)">删除
                </el-button>
                <el-button size="small"
                           type="text"
                           @click="handleCopy(scope.row)">
                  新增
                </el-button>
                <el-button size="small"
                           :disabled="!form.lineNo"
                           type="text"
                           @click="handleCover(scope.$index)">
                  全覆盖
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer"
         class="dialog-footer">
      <el-button @click="dialogForm = false">取 消</el-button>
      <el-button type="primary"
                 @click="handleSubmit"
                 :loading="$store.getters.loadingBtn">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  addSpecialTransportLineMachine,
  updateSpecialTransportLineMachine
} from '@/api/baseResource/baseResource'
import autoSearchOrg from '@/components/autocomplete/autoSearchOrg'
import searchDept from '@/components/autocomplete/autoSearchDept'
import autoSearchLine from '@/components/autocomplete/autoSearchLine'
import autoSearchResource from '@/components/autocomplete/autoSearchResource'
import { maxLength, sortLength } from '@/utils/rules'

export default {
  name: 'roleForm',
  components: { autoSearchOrg, searchDept, autoSearchLine, autoSearchResource },
  data() {
    return {
      form: this.clearForm(),
      rules: {
        lineNo: [
          { required: true, message: '请输入专运线', trigger: 'blur' },
          sortLength
        ],
        orgId: [{ required: true, message: '请选择单位', trigger: 'change' }],
        deptId: [{ required: true, message: '请选择部门', trigger: 'change' }]
        // remark: [maxLength]
      },
      dialogForm: false,
      isEdit: false,
      maxLot: 0
    }
  },
  methods: {
    clearForm() {
      return {
        lineNo: '',
        orgId:
          this.$store.state.user.currentUser.org &&
          this.$store.state.user.currentUser.org.id,
        orgName:
          this.$store.state.user.currentUser.org &&
          this.$store.state.user.currentUser.org.name,
        deptId: '',
        deptName: '',
        specialTransportLineMachine: [
          {
            machineName: '',
            priority: '',
            machineId: '',
            startParkingLot: 1,
            endParkingLot: 1,
            valid: true,
            remark: ''
          }
        ]
      }
    },
    // 保存
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.isEdit ? this.handleToEdit() : this.handleToAdd()
        } else {
          this.$message({
            message: '请检查表单',
            type: 'error'
          })
        }
      })
    },
    // 新增
    handleToAdd() {
      addSpecialTransportLineMachine(this.form).then(res => {
        this.$message({ message: '新增成功!', type: 'success' })
        this.dialogForm = false
        this.$emit('load')
      })
    },
    // 编辑
    handleToEdit() {
      updateSpecialTransportLineMachine(this.form.id, this.form).then(res => {
        this.$message({ message: '编辑成功!', type: 'success' })
        this.dialogForm = false
        this.$emit('load')
      })
    },
    handleRemove(index) {
      this.form.specialTransportLineMachine.splice(index, 1)
    },
    getLineInfo(item) {
      if (item) {
        this.form.lineNo = item.resourceNo
        this.form.lineId = item.id
        this.maxLot = item.maxParkingNum
      } else {
        this.form.lineNo = ''
        this.form.lineId = ''
        this.maxLot = 0
        this.form = this.clearForm()
      }
    },
    handleCopy(item) {
      this.form.specialTransportLineMachine.push({
        machineName: '',
        priority: '',
        machineId: '',
        startParkingLot: '',
        endParkingLot: '',
        valid: true,
        remark: ''
      })
    },
    handleCover(index) {
      this.form.specialTransportLineMachine[index].startParkingLot = 1
      this.form.specialTransportLineMachine[index].endParkingLot = this.maxLot
    }
  },
  watch: {
    dialogForm(bool) {
      if (!bool) {
        this.$refs.form.resetFields()
        this.isEdit = false
        this.form = this.clearForm()
        this.$emit('clear')
      }
    }
  }
}
</script>

<style scoped>
</style>
